<template>
    <div class="d-flex">
        <div class="shape-wrapper" :style="{ color: shapeColor }">
      <div class="horizontal-bar"></div>
      <div class="circle"></div>
      <div class="horizontal-bar"></div>
    </div>
    <div style="margin-left: 8px;
    font-size: 20px;
    display: flex;
    align-items: center;
    
    " >{{text}}</div>
    </div>
    
  </template>
  <script setup lang="ts" >
  const props=defineProps({
    shapeColor:{
      type:String,
      default:'black'
    },
    text:{
      type:String,
      default:''
    }
  });
</script>
  <style scoped >
  .shape-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .horizontal-bar {
    background-color: currentColor;
    height: 5px; /* Adjust the thickness of the bar */
    width: 14px; /* Adjust the length of the bar */
  }
  
  .circle {
    background-color: currentColor;
    border-radius: 50%;
    border: 3px solid currentColor;
    box-sizing: border-box;
    width: 10px; /* Adjust the size of the circle */
    height: 10px; /* Adjust the size of the circle */
    margin: 0 -1px; /* Adjust the spacing around the circle */
  }
  .circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; /* 内圆直径，使它小于外圆 */
  height: 6px; /* 内圆直径，使它小于外圆 */
  background-color: #032332; /* 内圆颜色 */
  border-radius: 50%; /* 内圆形状 */
}
  </style>
  